layui.use(['table', 'form', 'element', 'upload'], function () {
    let table = layui.table,
        form = layui.form,
        $ = layui.jquery,
        upload = layui.upload
    ;
    // //头工具栏事件

    $('#addModule').click(function () {
        layer.open({
            type: 2,
            title: '新增模块',
            area: ['800px', '650px'],
            fix: false, //
            closeBtn: false,
            shift: 2,
            shadeClose: false,
            content: ["addModule.html", 'no'],
            success: function (layero, index) {
                const body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                const iframeWin = layero.find('iframe')[0].contentWindow;
                body.find("#projectId").val($("#projectId option:selected").val());
                body.find("#namespaceId").val($("#namespaceId option:selected").val());
                iframeWin.layui.form.render();
            },
            yes: function () {
            },
            end: function (){
                search()
            }
        });
    });
    $('#importJarImages').click(function () {
        layer.open({
            type: 2,
            title: '导入jar包镜像',
            area: ['1000px', '600px'],
            fix: false, //
            closeBtn: true,
            shift: 2,
            shadeClose: true,
            content: ["importImages.html", 'no'],
            success: function (layero, index) {
                const body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                const iframeWin = layero.find('iframe')[0].contentWindow;
                body.find("#projectId").val($("#projectId option:selected").val());
                body.find("#namespaceId").val($("#namespaceId option:selected").val());
                iframeWin.layui.form.render();
            },
            yes: function () {
            },
            end: function (){
                search()
            }
        });
    });
    $('#query').click(function () {
        search();
    });
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            search();
        }
    });
    function search() {
        const params = {
            moduleName: $('#content').val(),
            projectId: $("#projectId option:selected").val(),
            namespaceId: $("#namespaceId option:selected").val()
        }
        $.ajax({
            url: '/totalOverview/getAllDockerInfo',
            data: JSON.stringify(params),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            type: "POST",
            success: function (result) {
                if (result.code==0) {
                    const container_div = $("#container_div");
                    container_div.html("")
                    let html = "";
                    for (item of result.data){
                        let tags = item.tags
                        let tagsHtml=""
                        if (tags!=null){
                            for (tagsItem of tags){
                                tagsHtml = tagsHtml+" <option  value=\""+tagsItem+"\">"+tagsItem+"</option>\n"
                            }
                        }
                        html = html+ "<div class=\"layui-col-md2 layui-col-sm4\">\n" +
                            "            <div class=\"cmdlist-container\" style=\"border:1px solid #178593\">\n" +
                            "                <div style=\"text-align: center;margin-top: 10px\">\n" +
                            "                    <label>"+item.moduleName+"</label> <a class='\detailAll\' id='\detailAll_"+item.moduleName+"\' style='color: #8700af;text-decoration:underline;'>详情</a> \n" +
                            "                </div>\n" +
                            "                <div style=\"text-align: center;margin-top: 10px\">\n" +
                            "                    <label>总节点数：["+item.allNode+"]</label>\n" +
                            "                    <label>运行节点：["+item.runNode+"] <b class='\addNode\' id='\addNode_"+item.moduleName+"\' style=\"color: rgba(18,64,215,0.35);text-decoration:underline;\">扩容</b></label>\n" +
                            "                </div>\n" +
                            "                <div style=\"text-align: center;margin-top: 10px\">\n" +
                            "                    <label>"+item.description+"</label>\n" +
                            "                </div>\n" +
                            "                <div class=\"layui-form-item\" style=\"text-align: center;margin-top: 10px\">\n" +
                            "                    <label class=\"layui-form-label\" style=\"width: 50px\">操作：</label>\n" +
                            "                    <div class=\"layui-input-inline\" style=\"width: 100px;\">\n" +
                            "                        <select name=\"operation\" id=\"operation_"+item.moduleName+"\"> \n" +
                            "                            <option  value=\"1\">重启</option>\n" +
                            "                            <option  value=\"2\">停止</option>\n" +
                            "                            <option  value=\"3\">暂停</option>\n" +
                            "                        </select>\n" +
                            "                    </div>\n" +
                            "                    <button class=\"layui-btn layui-btn-sm save_operation\" id='\save_operation_"+item.moduleName+"\'  >操作</button>\n" +
                            "                </div>\n" +
                            "                <div class=\"layui-form-item\" style=\"text-align: center;margin-top: 10px\">\n" +
                            "                    <label class=\"layui-form-label\" style=\"width: 50px\">版本：</label>\n" +
                            "                    <div class=\"layui-input-inline\" style=\"width: 100px;\">\n" +
                            "                        <select name=\"operation\" id=\"tag_"+item.moduleName+"\" lay-filter=\"tag_"+item.moduleName+"\">\n" +
                                                           tagsHtml+
                            "                        </select>\n" +
                            "                    </div>\n" +
                            "                    <button class=\"layui-btn layui-btn-sm save_tag\" id='\save_tag_"+item.moduleName+"\' >切换</button>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "        </div>"
                    }
                    container_div.append(html)
                    form.render("select")
                }
            }
        })
    }
    $(document).on('click','.detailAll',function(){
        const moduleName = $(this).attr("id").replace("detailAll_","")
        const projectId=$("#projectId option:selected").val()
        const namespaceId=$("#namespaceId option:selected").val()
        layer.open({
            type: 2,
            title: 'docker节点明细/'+moduleName,
            area: ['1000px', '700px'],
            fix: false, //
            closeBtn: false,
            shift: 2,
            shadeClose: true,
            content: ["nodeList.html", 'no'],
            success: function (layero, index) {
                const body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                const iframeWin = layero.find('iframe')[0].contentWindow;
                body.find("#projectId").val(projectId);
                body.find("#namespaceId").val(namespaceId);
                body.find("#moduleName").val(moduleName);
                iframeWin.layui.form.render();
            },
            yes: function () {
            }
        });
    })
    //操作
    $(document).on('click','.save_operation',function(){
        const moduleName = $(this).attr("id").replace("save_operation_","")
        const projectId=$("#projectId option:selected").val()
        const namespaceId=$("#namespaceId option:selected").val()
        const operation=$("#operation_"+moduleName+" option:selected").val()
        const operationName=$("#operation_"+moduleName+" option:selected").html()
        const tag=$("#tag_"+moduleName+" option:selected").val()
        if (tag==null || tag == ""){
            layer.msg("无版本记录无法操作,请上传镜像进行版本切换", {icon: 2, time: 3000},function () {
            })
            return
        }
        const params = {
            moduleName:moduleName,
            projectId:projectId,
            namespaceId:namespaceId,
            operation:operation,
        }
        const msg = layer.msg("正在"+operationName+moduleName+"...", {icon: 1, time: false})
        $.ajax({
            url: '/totalOverview/operation',
            data: JSON.stringify(params),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            type: "POST",
            success: function (result) {
                layer.close(msg)
                if (result.code==0) {
                    layer.msg(operationName+moduleName+"成功", {icon: 1, time: 2000},function () {
                        search()
                    })
                }else {
                    layer.msg(result.desc, {icon: 2, time: 3000},function () {
                    })
                }
            }
        })
    })
    //版本切换
    $(document).on('click','.save_tag',function(){
        const moduleName = $(this).attr("id").replace("save_tag_","")
        const projectId=$("#projectId option:selected").val()
        const namespaceId=$("#namespaceId option:selected").val()
        const tag=$("#tag_"+moduleName+" option:selected").val()
        if (tag==null || tag == ""){
            layer.msg("版本号为空无法切换", {icon: 2, time: 3000},function () {
            })
            return
        }
        const params = {
            moduleName:moduleName,
            projectId:projectId,
            namespaceId:namespaceId,
            tag:tag,
        }
        const msg = layer.msg("正在切换"+moduleName+"至"+tag+"版本...", {icon: 1, time: false})
        $.ajax({
            url: '/totalOverview/changeTag',
            data: JSON.stringify(params),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            type: "POST",
            success: function (result) {
                layer.close(msg)
                if (result.code==0) {
                    layer.msg("已切换"+moduleName+"至"+tag+"版本", {icon: 1, time: 2000},function () {
                        search();
                    })
                }else {
                    layer.msg(result.desc, {icon: 2, time: 3000},function () {
                    })
                }
            }
        })
    })
    //扩容
    $(document).on('click','.addNode',function(){
        const moduleName = $(this).attr("id").replace("addNode_","")
        const projectId=$("#projectId option:selected").val()
        const namespaceId=$("#namespaceId option:selected").val()
        layer.open({
            type: 2,
            title: '扩容docker节点',
            area: ['700px', '400px'],
            fix: false, //
            closeBtn: false,
            shift: 2,
            shadeClose: false,
            content: ["addNode.html", 'no'],
            success: function (layero, index) {
                const body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                const iframeWin = layero.find('iframe')[0].contentWindow;
                body.find("#projectId").val(projectId);
                body.find("#namespaceId").val(namespaceId);
                body.find("#moduleName").val(moduleName);
                iframeWin.layui.form.render();
            },
            yes: function () {
            },
            end: function (){
                search()
            }
        });
    })

    $(function () {
        getProject("")
        getNamespace("")
        setTimeout(function() {
            search();
        },500)
        form.render('select');
    })
    projectNameInput = function (e) {
        const val = $("#projectName").val();
        getProject(val)
    }
    let projectData

    function getProject(projectName) {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/admProject/getAll?name=" + projectName,//url
            success: function (result) {
                projectData = result
                $("#projectId").html("");
                var html = "";
                $("#projectId").html("<option value=\"\">请选择项目</option>");
                if (result != null) {
                    $.each(result, function (index, item) {
                        html += "<option  value='" + item.id + "'>" + item.projectName + "</option>";
                    })
                }
                $("#projectId").append(html);
                form.render('select');
                if (projectName != null && projectName != '') {
                    $(".projectId").find(".layui-form-select").addClass("layui-form-selected")
                }
                if (result != null) {
                    $("#projectName").val(result[0].projectName);
                    $("#projectId").val(result[0].id);
                }
            },
            error: function () {
                alert("异常！");
            }
        });
    }

    // 监听下拉框改变事件,修改输入框中的内容
    form.on("select(projectId)", function (data) {
        let value = data.value
        let selectObj = projectData.filter(item => {
            return item.id == value
        })
        $("#projectName").val(selectObj[0].projectName);
    })


    namespaceNameInput = function (e) {
        const val = $("#namespaceName").val();
        getNamespace(val)
    }
    let namespaceData

    function getNamespace(name) {
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/admNamespace/getAll?name=" + name,//url
            success: function (result) {
                namespaceData = result
                $("#namespaceId").html("");
                var html = "";
                $("#namespaceId").html("<option value=\"\">请选择命名空间</option>");
                if (result != null) {
                    $.each(result, function (index, item) {
                        html += "<option  value='" + item.id + "'>" + item.name + "</option>";
                    })
                }
                $("#namespaceId").append(html);
                form.render('select');
                if (name != null && name != '') {
                    $(".namespaceId").find(".layui-form-select").addClass("layui-form-selected")
                }
                if (result != null) {
                    $("#namespaceName").val(result[0].name);
                    $("#namespaceId").val(result[0].id);
                }
            },
            error: function () {
                alert("异常！");
            }
        });
    }

    // 监听下拉框改变事件,修改输入框中的内容
    form.on("select(namespaceId)", function (data) {
        let value = data.value
        let selectObj = namespaceData.filter(item => {
            return item.id == value
        })
        $("#namespaceName").val(selectObj[0].name);
    })


});
